<template>
    <div class="box">
        <div class="mp">
            <video :src="arr[0].video.url" controls :poster="arr[0].video.imgUrl" @play="nums()"></video>
            <div class="head" v-show="num">
                <div class="head-img"><img :src="arr[0].user.avatarurl" alt="" /></div>
                <div class="head-zan">
                    <div class="head-zan-img">
                        <p v-if="chu">
                            <van-icon name="good-job" size="25px" @click="tobe" />
                        </p>
                        <p v-if="!chu">
                            <van-icon name="good-job" size="25px" @click="tobes" color="red" />
                        </p>
                    </div>
                    <p>{{ this.arr[0].upCount }}</p>
                </div>
                <div class="share">

                    <!-- <div class="head-zan-img">
                        {{ arr[0].shareCount }}
                    </div> -->
                    <p>
                        <van-icon name="share" @click="showShare = true" size="25px" />
                    </p>
                    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

                </div>
            </div>

        </div>

    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {

    name: 'LastprojectVideoDetailView',

    data() {
        return {
            showShare: false,
            options: [
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            ],
            arrs: [],
            urls: "",
            imgsurl: "",
            num: 1,
            chu: 1


        };
    },
    created() {
        this.tos()
    },
    computed: {
        ...mapState(["arr"])
    },

    methods: {
        tobe() {

            this.arr[0].upCount++
            this.chu = !this.chu
            this.$toast("点赞成功")
        },
        tobes() {
            this.arr[0].upCount--
            this.chu = !this.chu
            this.$toast("点赞取消")
        },
        ...mapMutations(["deturl"]),
        tos() {
            this.arrs = this.arr
            console.log(this.arr);
        },
        detele() {
            this.deturl()
        },
        nums() {
            this.num = 0
        }
    },
    destroyed() {
        // 销毁全局arr
        this.detele()
    }



};
</script>

<style lang="scss" scoped>
.box {
    margin-top: -60px;
}

.box .mp {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: black;
}

.box .mp video {
    width: 100%;

}

.box .mp .head .head-img img {
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    right: 5px;
    top: 350px;
}

.box .mp .head .head-zan .head-zan-img {
    position: absolute;
    right: 10px;
    top: 410px;
    color: white;
}

.box .mp .head .head-zan>p {
    position: absolute;
    right: 13px;
    top: 440px;
    color: white;
}

.box .mp .head .share .head-zan-img {
    position: absolute;
    right: 10px;
    top: 460px;
    color: white;
}

.box .mp .head .share>p {
    position: absolute;
    right: 10px;
    top: 475px;
    color: white;
}
</style>